<template>
  <div>
    <div class="reg-container">
      <div class="logo">
        <img src="../../assets/images/logo.png" alt="" />
      </div>
      <div class="reg-main">
        <div class="title">
          <img src="../../assets/images/login_title.png" alt="" />
        </div>
        <div class="main">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item prop="username">
              <el-input
                v-model="ruleForm.username"
                autocomplete="off"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-button
              style="width: 100%"
              type="primary"
              @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-link @click="$router.push('/reg')">去注册</el-link>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import request from '@/tools/request.js'
import { loginApi } from '@/api'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        password: '111111',
        username: 'qq12'
      },
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // request({
          //   method: 'post',
          //   url: '/api/login',
          //   data: this.ruleForm
          // }).then((res) => {
          //   this.$message({
          //     message: '登录成功',
          //     type: 'success'
          //   })
          //   this.$router.push('/')
          // })
          const res = await loginApi(this.ruleForm)
          if (res.data.code !== 0) return this.$message.error(res.data.message)
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          this.$router.push('/')
          this.$store.commit('updateToken', res.data.token)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang='less'  scoped>
.reg-container {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/images/login_bg.jpg') no-repeat center / cover;
  position: relative;
  .logo {
    width: 1200px;
    margin: 0 auto;
  }
  .reg-main {
    width: 400px;
    height: 335px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    box-sizing: border-box;
    .title {
      text-align: center;
      margin-bottom: 10px;
    }
  }
}
</style>
